import React, { Component  } from 'react';
import './commodity.scss'
import Header from '../../components/MyHeader/header'
import { InfiniteScroll,SearchBar } from 'antd-mobile'
import HomeList from '../../components/MyList/homelist'
import { home_goodlist } from '../../apis/api'


class commodity extends Component {
    state = {
        arr: [],
        count: 20,
        page: 1,
        total: 98,
        hasMore: false,
    }
    // loadMore=(isRetry)=> {
    //     // if(this.state.hasMore){}
    //     console.log(isRetry);
    //     return
    // }
    loadMore=()=> { 
        return this.getDataList()
    }
    toSearch=() =>{
        this.props.history.push({pathname:"/search"})
    }

    async getDataList() {
        // console.log(this.state.hasMore,'11111111111111111111111111');
        let ref = await home_goodlist({ page: this.state.page, count: this.state.count })
        this.setState({
            arr: [...this.state.arr, ...ref.data.list],
            page: this.state.page + 1,
            total: 98,
            // hasMore:[...this.state.arr, ...ref.data.list].length<98
        }, () => {
            console.log(this.state.arr.length,this.state.total);
            this.setState({
                hasMore:this.state.arr.length<this.state.total
            })
        })
    }

    componentDidMount() {
        // console.log(this.state.count);
           
        this.getDataList()
    }
//    serArray(arr) {
//        arr.sort(compare('salesPrice.value'));
//        console.log(arr);
//        return arr;
//     }
//     compare(property) {
//         return function (a, b) {
//             return a[property] - b[property];
//         }


//     }

    render() {
        return (
            <div className='commodity'>
                <div className='headers'>
                    <Header back={null} title='全部商品' />
                    <SearchBar placeholder='搜索店铺内商品' onFocus={this.toSearch} />
                </div>
                <div></div>
                <HomeList arr={this.state.arr}></HomeList>
                <InfiniteScroll loadMore={this.loadMore} hasMore={this.state.hasMore} />
                <div className='foot'></div>
            </div>
        );
    }
}

export default commodity;